<script setup lang="ts">
import { ref, reactive } from "vue"
import { $t } from '#/locales'
import { trimStringParams } from '#/utils/trimStringParams';
import { getWhiteUserByOrgidApi, createOrgUserApi } from '#/api/certificate/studentMgr'

defineOptions({ name: 'Dialog' })

const props = defineProps({
  currentOrgId: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['queryTable'])

const studentNamePhTxt = $t('common.inputPhTxt', [$t('studentMgr.nameTxt')])

const submitLoading = ref(false)
const listLoading = ref(false)
const editData = ref<any>(null)
const tableData = ref<any>([])
const selectList = ref<any>([])
const dialogVisible = ref(false)
const formRef = ref()
const defaultFormInline = {
  name: '',
  phone: '',
}
const total = ref(0)
const pageData = reactive({
  curPage: 1,
  pageSize: 10,
});
const formInline = reactive({ ...defaultFormInline })

const handleClose = () => {
  Object.assign(formInline, defaultFormInline)
  formRef.value.resetFields()
  tableData.value = []
  selectList.value = []
  pageData.pageSize = 10
  pageData.curPage = 1
  dialogVisible.value = false
}

const inint = (data: any) => {
  editData.value = data
  dialogVisible.value = true
  getTableData()
}
const handleSelectionChange = (data: any) => {
  console.log(data)
  selectList.value = data
}

const submit = () => {
  let params = {
    id: props.currentOrgId,
    userId: selectList.value.map((item: { id: any }) => item.id) ?? []
  }
  submitLoading.value = true
  createOrgUserApi(params).then(() => {
    emit('queryTable')
    handleClose()
  }).finally(() => {
    submitLoading.value = false
  })
}

const getTableData = () => {
  const params = {
    id: props.currentOrgId,
    curPage: pageData.curPage,
    pageSize: pageData.pageSize
  } as any;
  const trimData = trimStringParams(formInline)
  Object.keys(trimData).forEach(key => {
    const kVal = trimData[key as keyof typeof trimData]
    if (kVal) {
      params[key] = kVal
    }
  })
  listLoading.value = true
  getWhiteUserByOrgidApi(params)
    .then((res) => {
      const { data, pageInfo } = res
      console.log(data)
      tableData.value = data || [];
      total.value = pageInfo.totalRows
    })
    .finally(() => {
      listLoading.value = false;
    });
};

const handleSizeChange = (val: number) => {
  pageData.pageSize = val
  pageData.curPage = 1
  getTableData()
}
const handleCurrentChange = (val: number) => {
  pageData.curPage = val
  console.log(pageData.curPage)
  getTableData()
}

defineExpose({ inint })

</script>
<template>
  <el-dialog v-model="dialogVisible" align-center :destroy-on-close="true" :title="$t('common.newTxt')" width="800"
    :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
    <div>
      <el-form ref="formRef" class="w-[100%]" :inline="true" :model="formInline">
        <el-form-item :label="$t('studentMgr.nameTxt')" style="width: 35%;">
          <el-input v-model="formInline.name" :maxlength="50" clearable :placeholder="studentNamePhTxt" />
        </el-form-item>
        <el-form-item :label="$t('common.phoneTxt')" style="width: 35%;">
          <el-input v-model="formInline.phone" clearable maxlength="11"
            :placeholder="$t('common.inputPhTxt', [$t('common.phoneTxt')])" />
        </el-form-item>
        <el-form-item label="" class="float-right">
          <el-button type="primary" @click="getTableData">
            {{ $t('common.searchTxt') }}
          </el-button>
        </el-form-item>
      </el-form>
      <div class="mb-[24px]">
        <el-table height="440px" @selection-change="handleSelectionChange" :data="tableData" row-key="id"
          class="overflow-auto" v-loading="listLoading">
          <el-table-column header-align="center" align="center" width="60" type="selection"></el-table-column>
          <el-table-column prop="name" :label="$t('studentMgr.nameTxt')" min-width="80">
            <template #default="{ row }">
              <div>{{ row.nameCn || '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" :label="$t('common.phoneTxt')" min-width="116" />
        </el-table>
        <ElPagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination pt-[15px]"
          size="small" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
          :page-size="pageData.pageSize" :total="total"></ElPagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('common.cancelTxt') }}
        </el-button>
        <el-button type="primary" @click="submit" :disabled="selectList.length === 0" :loading="submitLoading">
          {{ $t('common.submitTxt') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 24px;
  width: calc((100% - 72px)/4);

  &:nth-of-type(4n),
  &:last-of-type {
    width: auto;
    margin-right: 0px;
  }
}
</style>
